import React from 'react';
import {withRouter} from 'react-router';
import { Modal } from 'antd-mobile';
import {connect} from 'react-redux';
import action from '../../store/action';
import Css from './search.css';
import { Toast } from 'antd-mobile';
class searchComponent extends React.Component{
    constructor(props){
        super(props);
        this.state={
            bHistorySeach:true,
            aHotKeyWords:[],
            iInput:''
        }
        this.aHistoryKeyWords=props.state.redHistorySeach.aHistoryKeyWords
    }
    componentDidMount(){
        if(this.aHistoryKeyWords.length>0){
            this.setState({bHistorySeach:true})
        }else {
            this.setState({bHistorySeach:false})
        }
        this.getHotKeyWordsData()
    }
    //获取热门推荐数据
    getHotKeyWordsData(){
        this.props.dispatch(action.actHotSeach.actHotSeach())
    }
    //警告窗
    clearHistory(){
        Modal.alert('确定要删除吗？', '', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            { text: '确定', onPress: () =>{
                    this.setState({bHistorySeach:false});
                    localStorage.removeItem('HK');
                    this.aHistoryKeyWords=[]
                } },
        ]);
    }
    //点击添加关键词
    addHistoryKeyWords(){
        let temKeyWords=this.state.iInput || this.props.senKeyWords
        if(this.refs['keyWords'].value!==''){
            for (let i in this.aHistoryKeyWords){
                if (this.aHistoryKeyWords[i]===temKeyWords){
                    this.aHistoryKeyWords.splice(i--,1)
                }
            };
            this.aHistoryKeyWords.unshift(temKeyWords);
            localStorage['HK']=JSON.stringify(this.aHistoryKeyWords);
            this.props.dispatch(action.actHistorySeach.actHistorySeach(this.aHistoryKeyWords));
            if (this.aHistoryKeyWords.length>0){
                this.setState({bHistorySeach:true})
            }
            this.goPage("goods/seach?keywords="+temKeyWords,temKeyWords)
        }else {
            Toast.info('请输入宝贝名称', 2);
        }


    }
    //input双向绑定
    bangDings(e){
        this.setState({iInput:e.target.value})
    }
    //点击跳转页面
    goPage(purl,childrenKeyWords){
        if(this.props.isLocal==='1'){
            this.props.childrenKeyWords(childrenKeyWords)
        }else {
            this.props.history.push(window.base.config.path+purl)
        }
    }
    render(){
        return(
            <div className={Css['search']} style={{display:this.props.pageStyle}}>
                <div className={Css['searchTop']}>
                    <i className={Css['searchClose']+' close fs50'} onClick={this.props.getPageStyle.bind(this,false)}/>
                    <div className={Css['searchTopBorder']}>
                        <input className={Css['searchTopInput']} type='text' defaultValue={this.props.senKeyWords}  placeholder={'请输入产品名称'} onChange={this.bangDings.bind(this)} ref='keyWords' />
                        <button className={Css['searchTopButton']} type='buttom' onClick={this.addHistoryKeyWords.bind(this)} ><i className={'seach fs50'}/></button>
                    </div>
                </div>
                <div className={this.state.bHistorySeach?Css['searchHistory']:Css['searchHistory']+' hiden'}>
                    <div className={Css['searchTitle']+' fs28'}>
                        <p>最近搜索</p>
                        <i className={'garbage fs40'} onClick={this.clearHistory.bind(this)} />
                    </div>
                    <div className={Css['searchWrap']}>
                        <ul>
                            {
                                this.props.state.redHistorySeach.aHistoryKeyWords!=null?this.props.state.redHistorySeach.aHistoryKeyWords.map((item,index)=>{
                                    return(
                                        <li key={index} onClick={this.goPage.bind(this,'goods/seach?keywords='+item,item)}>{item}</li>
                                    )
                                }):''
                            }
                        </ul>
                    </div>
                </div>
                <div className={Css['searchHistory']}>
                    <div className={Css['searchTitle']+' fs28'}>
                        <p>热门搜索</p>
                    </div>
                    <div className={Css['searchWrap']}>
                        <ul>
                            {
                                this.props.state.redHotSeach.aHotKeyWords!=null?this.props.state.redHotSeach.aHotKeyWords.map((item,index)=>{
                                    return(
                                        <li key={index}  onClick={this.goPage.bind(this,'goods/seach?keywords='+item.title,item.title)}>{item.title}</li>
                                    )
                                }):''
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(withRouter(searchComponent))